<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="../common/base.jsp"%>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>支付</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
    <style>
        body{
            padding: 10px;
        }
        .po_title{
            position: relative;
            line-height: 26px;
            height: 26px;
        }
        .po_title>span{
            position: absolute;
            top: 0;
            bottom: 0;
        }
        .po_title>div{
            line-height: 20px;
            font-size: 17px;
            text-align: center;
        }
        .po_money{
            text-align: center;
            padding: 8px 0;
        }
        .po_money>span,
        .po_money>h2{
            display: inline-block;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
        .po_money>h2{
            font-size: 24px;
        }
        .po_cou{
            display: table;
            width: 100%;
            padding: 5px 0;
        }
        .po_cou>span{
            display: table-cell;
        }
        .po_cou>span:first-child{
            text-align: left;
            color: #F99359;
        }
        .po_cou>span:last-child{
            text-align: right;
        }
        .po_con{
            padding: 5px 0;
        }
        .popay-ul{

        }
        .popay-ul>li{

        }
        .popay-ul>li>label{
            font-size: 14px;
            font-weight: normal;
            padding: 10px 0;
            margin: 0;
        }
        .btn-pay,.close_win{
            cursor: pointer;
        }
    </style>
</head>
<body>
<%-- 取消 --%>
<div class="po_title"><span class="close_win">取消</span><div>支付</div></div>
<%-- 金额 || 优惠券显示 || 选择支付方式 --%>
<div class="po_con">
    <div class="po_money"><span>共</span><h2>0.00</h2><span>元</span></div>
    <div class="po_cou" style="display: none;"><span>优惠券抵扣</span><span id="cou_money">0元</span></div>
    <%-- 选择支付方式 --%>
    <div>
        <ul class="popay-ul">
            <li>
                <input type="radio" name="pay_type" value="1" id="not" class="e-radio">
                <label for="not">
                    <i class="po-icon yu"></i>
                    <span>余额支付(￥${balance}元)</span>
                    <%--<span style="text-align: right; padding-right: 10px;"><input type="radio" name="test"></span>--%>
                </label>
            </li>
            <li>
                <input type="radio" name="pay_type" value="2" id="not1" class="e-radio">
                <label for="not1">
                    <i class="po-icon wx"></i>
                    <span>微信支付</span>
                    <%--<span style="text-align: right; padding-right: 10px;"><input type="radio" name="test"></span>--%>
                </label>
            </li>
            <%--<li>--%>
            <%--<input type="radio" name="pay_type" value="3" id="not2" class="e-radio">--%>
            <%--<label for="not2">--%>
            <%--<i class="po-icon zhifubao"></i>--%>
            <%--<span>微信支付</span>--%>
            <%--&lt;%&ndash;<span style="text-align: right; padding-right: 10px;"><input type="radio" name="test"></span>&ndash;%&gt;--%>
            <%--</label>--%>
            <%--</li>--%>
        </ul>
    </div>
</div>
<%-- 确认支付 --%>
<div><div class="btn-pay" id="yes_pay" href="javascript:void(0);">确认支付</div></div>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js?version=${version}"></script>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script type="text/javascript">
    // window.top.wx.error(function(res){
    //     alert(JSON.stringify(res));
    //     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    // });
    var WeixinJSBridge=window.top.WeixinJSBridge || {};
    //判断是不是微信浏览器
    var couInfo=(getLocalStorage("couInfo",'object'))
    var yun=new yueajax( "${openId}");
    var yu=${balance};
    var wt=window.top;
    $('.po_money>h2').html(couInfo.actualFare);
    if(couInfo.couponUuid){
        $('.po_cou').show();
        $('#cou_money').html(couInfo.couponFare+"元");
    }
    if(yu>=couInfo.actualFare){
        $('[for="not"]').click();
    }else{
        $('[for="not1"]').click();
    }

    function is_weixn(){
        var ua = navigator.userAgent.toLowerCase();
        return ua.match(/MicroMessenger/i)=="micromessenger";
    }
    //选择支付类型
    $('[name="pay_type"]').change(function(){
        var t=$(this);
        if(t.val()==1 &&  yu<couInfo.actualFare){
            layer.msg('余额不足，请选择其他支付类型')
            setTimeout(function(){
                $('[for="not1"]').click();
                $('#not1').attr('checked',true);
//                alert($('[name="pay_type"]:checked').val())
            },10)

           $('[name="pay_type"]').val('2')
           console.log($('[name="pay_type"]:checked').val())

           return false;
        }
    })
    //关闭
    $('.close_win').click(function(){
        delLocalStorage("couInfo")
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
    })
    //支付
    $('#yes_pay').click(function(e){
        if($(this).data("click")){
            return;
        }
        $(this).data("click",true)
        var c=$('[name="pay_type"]:checked').val();
        if(c==1){//余额支付
            closePay(getYu);
        }else{//微信支付
            // if(!getLocalStorage("isH5")){//微信支付
                closePay(getWxPay);
            // }else{
            //     //微信H5支付
            //     closePay(getH5Pay);
            // }

        }
    })
    //清空支付
    function closePay(fn){
        yun.ajax_md5(
                {
                    orderUuid:wt.couInfo.uuid
                },
                base+"/api/v1/common/order/removePayCache",
                function(data){
                    fn();
//                    layer.msg("支付成功！");
//                    $('#yes_pay').data('click',false)
                },
                function(data){
                    layer.msg(data.msg);
                    $('#yes_pay').data('click',false)
                }
        )
    }

    //余额支付
    function getYu(){
        yun.ajax_md5(
                {
                    orderUuid:wt.couInfo.uuid,
                    couponUuid:wt.couInfo.couponUuid
                },
                base+"/api/v1/passenger/token/wallet/pay",
                function(data){
                    layer.msg("余额支付成功！");
                    $('#yes_pay').data('click',false)
                },
                function(data){
                    layer.msg(data.msg);
                    $('#yes_pay').data('click',false)
                }
        )
    }
    //微信H5支付
    function getH5Pay(){
        var spbillCreateIp="192.168.1.1";
        yun.ajax_md5(
                {
                    orderUuid: wt.couInfo.uuid,
                    couponUuid: wt.couInfo.couponUuid,
                    spbillCreateIp: spbillCreateIp,
                },
                base+"/wx/token/h5TradeUrl",
                function(data){
                    var data = data.data;
                    if(data){
                        addIfarm(data.mwebUrl);
                    }else{
                        layer.msg('微信预支付通讯异常');
                    }
//                    layer.msg("支付成功！");
                    $('#yes_pay').data('click',false)
                },
                function(data){
                    layer.msg(data.msg);
                    $('#yes_pay').data('click',false)
                }
        )
    }
    function addIfarm(src){
//        wt.open(src)
        wt.location.href=src;
//        $('body').find('iframe').remove();
//        var i='<iframe src="'+src+'" frameborder="0" style="display: none;"></iframe>'
//        $('body').append(i);
    }

    //微信支付
    function getWxPay(){
        var spbillCreateIp="192.168.1.1"
        $.post("${base}/wx/tradeUrl", {
            orderUuid: couInfo.uuid,
            couponUuid: couInfo.couponUuid,
            openid: couInfo.openid,
            spbillCreateIp: spbillCreateIp,
            appid:"${appid}",
            passengerUuid:getLocalStorage('yueuserH5','object').uuid || '',
        }, function (result) {
            if (result.success) {
                var data = result.data;
                setLocalStorage('wxData', data);
                if(data){
                    doWxPay();
                }else{
                    layer.msg('微信预支付通讯异常');
                    $('#yes_pay').data('click',false)
                }
            }else {

                layer.msg(result.msg);
                $('#yes_pay').data('click',false)
            }

        });
    }


    function onBridgeReady() {
        var data = getLocalStorage('wxData', 'object')
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": data.appId,     //公众号名称，由商户传入
                    "timeStamp": data.timeStamp,         //时间戳，自1970年以来的秒数
                    "nonceStr": data.nonceStr, //随机串
                    "package": data.package,
                    "signType": data.signType,         //微信签名方式
                    "paySign": data.paySign //微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {

                        //TODO 调用回调接口
                    }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                }
        );
        $('#yes_pay').data('click',false)
    }
    function doWxPay() {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
//            onBridgeReady();
        } else {
            onBridgeReady();
        }
    }
</script>
</body>
</html>
